<template>
	<view class="my-content">
		<view class="topCard">
			<u-card :show-head="false" margin="0">
				<view slot="body">
					<view class="u-flex u-row-between">
						<view class="u-flex-1 u-text-center grayBox">
							<view class="color-666 u-line-1">{{$t("收录企业数量")}}</view>
							<view class="bigNum">333</view>
						</view>
						<view class="u-flex-1 u-text-center grayBox">
							<view class="color-666 u-line-1">{{$t("电话数量")}}</view>
							<view class="bigNum">333</view>
						</view>
						<view class="u-flex-1 u-text-center grayBox">
							<view class="color-666 u-line-1">{{$t("联络状态")}}</view>
							<view class="color-666 u-font-24 u-margin-top-20">{{$t("未联络")}}</view>
						</view>
					</view>
					<view class="color-999 u-font-24 u-margin-top-20 u-margin-left-10">{{$t("创建时间")}}：2024年8月21日
						11:58:24</view>
				</view>
			</u-card>
		</view>
		<u-gap height="20"></u-gap>
		<FavoriteList :checkAll="checkAll" :isCheckStatus="isCheckStatus" @change="change"></FavoriteList>

		<view class="footer">
			<view class="u-flex u-text-center" v-if="!isExport">
				<view @click="exportFun">
					<u-icon name="download" size="50" color="#ff4a17"></u-icon>
					<view class="u-margin-top-10 color-666 u-font-26">{{$t("导出")}}</view>
				</view>
				<view class="u-margin-left-44" @click="toEditor">
					<u-icon name="edit-pen" size="48" color="#ff4a17"></u-icon>
					<view class="u-margin-top-10 color-666 u-font-26">{{$t("编辑")}}</view>
				</view>
			</view>
			<view v-if="isExport">
				<u-checkbox v-model="checkAll" active-color="#ff7348" shape="circle">
					<view class="u-margin-left-10">
						<view>{{$t("全选")}}</view>
						<view>{{checkData.length}}/{{data.length}}</view>
					</view>
				</u-checkbox>
			</view>
			<view class="btns u-flex">
				<u-button type="primary" v-if="isExport" :custom-style="customStyle1" hover-class="none" @click="cancel"
					class="u-margin-right-20">
					{{$t("取消")}}
				</u-button>
				<u-button v-if="isExport" type="primary" :custom-style="customStyle" hover-class="none"
					@click="doExport">
					{{$t("批量导出")}}
				</u-button>
				<u-button v-if="!isExport" type="primary" :custom-style="customStyle1" hover-class="none"
					@click="addEnterprise" class="u-margin-right-20">
					{{$t("添加企业")}}
				</u-button>
				<u-button v-if="!isExport" type="primary" :custom-style="customStyle" hover-class="none"
					@click="sendEmail">
					{{$t("立即下单")}}
				</u-button>
			</view>
		</view>
		<u-modal v-model="confirmSendModal" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
			<view class="slot-content padding u-text-center">
				<view class="modalTitle">
					{{$t("本次导出需消耗数据量")}}
				</view>
				<view>
					<text class="bigNum">500</text>
					<text class="u-font-26">{{$t("条")}}</text>
				</view>
				<view class="u-font-26 u-margin-top-20 u-margin-bottom-30">{{$t("是否确认导出？")}}</view>
				<view class="u-margin-bottom-20">
					<u-button type="primary" :custom-style="customStyleBySend" hover-class="none" @click="doSendEmail">
						{{$t("确认导出")}}
					</u-button>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="confirmPayModal" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
			<view class="slot-content padding u-text-center">
				<view class="modalTitle">
					{{$t("非常抱歉，您的剩余导出数量不足")}}
					<view>{{$t("请立即充值！")}}</view>
				</view>
				<!-- <view class="u-font-26 u-margin-top-20 u-margin-bottom-30">{{$t("是否确认发送？")}}</view> -->
				<view class="u-margin-bottom-20 u-margin-top-30">
					<u-button type="primary" :custom-style="customStyleBySend" hover-class="none" @click="toPay">
						{{$t("去充值")}}
					</u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import FavoriteList from '../components/FavoriteList.vue'
	export default {
		components: {
			FavoriteList
		},
		onLoad({
			id
		}) {
			this.id = id
		},
		data() {
			return {
				confirmPayModal: false,
				confirmSendModal: false,
				customStyleBySend: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					height: '60rpx',
					'width': '300rpx',
				},
				isCheckStatus: false,
				checkAll: false,
				isExport: false, //是否导出
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx'
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx',
					color: '#ff4a17',
					'border': '1px solid #ff4a17'
				},


				id: null,
				name: '',
				data: []
			};
		},
		computed: {
			checkData() {
				return this.data.filter(item => item.checked)
			}
		},
		methods: {
			doSendEmail(){
				this.confirmPayModal = true;
			},
			toPay(){
				
			},
			//批量导出
			doExport() {
				if (this.checkData.length === 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t("请选择数据"),
					})
					return;
				}
				this.confirmSendModal = true;
				//验证钱够不够
				console.log(this.checkData);

			},
			exportFun() {
				this.isExport = true;
				this.isCheckStatus = true;
			},
			toEditor() {
				this.$u.route({
					url: 'pages/teleSales/favoriteEditor/favoriteEditor',
					params: {
						id: this.id
					}
				})
			},
			change(data) {
				this.data = data;
			},
			cancel() {
				this.isExport = false;
				this.isCheckStatus = false;
			},
			addEnterprise() {
				//添加企业 跳转

				this.$u.route({
					url: 'pages/teleSales/favoriteAdd/favoriteAdd',
					params: {
						id: this.id
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;

		.slot-content {
			.modalTitle {
				font-weight: 800;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.bigNum {
				color: #ff7348;
				font-size: 60rpx;
				font-weight: 800;
			}
		}

		.grayBox {
			background: #f6f6f6;
			border-radius: 15rpx;
			padding: 30rpx 0;
			overflow: hidden;
			margin: 0 10rpx;
			height: 160rpx;
		}

		.color-999 {
			color: #999;
		}

		.color-666 {
			color: #666;
		}

		.topCard {
			padding: 20rpx 30rpx;
			border-radius: 50rpx;
			overflow: hidden;
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
		}

		.bigNum {
			color: #ff7348;
			font-size: 50rpx;
			font-weight: 800;
		}
	}
</style>